<template>
  <div id="baiduMap">
    <div
      id="map"
      ref="map"
      v-loading="loading"
      element-loading-text="正在定位中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
  </div>
</template>
<style scoped lang="scss">
#map {
  height: 320px;
  width: 100%;
  margin: auto;
}
</style>
<script>
export default {
  name: "baiduMap",
  data() {
    return {
      map: null,
      point: null,
      marker: null,
      keyword: "",
      local: null,
      loading: true,
    };
  },
  mounted() {
    this.map = new window.BMapGL.Map(this.$refs.map);

    this.point = new window.BMapGL.Point(109.284302, 34.382084);

    this.map.centerAndZoom(this.point, 15);

    this.map.enableScrollWheelZoom(true);
    this.map.setMapStyleV2({
      styleId: "0454400efecea664f860b210363e95bc",
    });

    //添加一个点
    this.marker = new window.BMapGL.Marker(this.point); // 创建标注
    this.map.addOverlay(this.marker); // 将标注添加到地图中
    this.local = new window.BMapGL.LocalSearch(this.map, {
      renderOptions: { map: this.map },
    });
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
  watch: {
    keyword: {
      handler() {
        if (this.keyword === "") {
          this.local.clearResults();
          this.map.centerAndZoom(this.point, 15);
        } else {
          this.local.search(this.keyword);
        }
      },
    },
  },
};
</script>
